<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放图片</title>
</head>
<body>
    <img src="image/1.jpg" id="p" height="400px"><br/>
    <input type="button" id="picUp" onclick="returnPicture()" value="上一张">
    <input type="button" id="picRandom" onclick="randomPicture()" value="随机一张">
    <input type="button" id="picDown" onclick="nextPicture()" value="下一张">
</body>
</html>
<script>
    let number = 1;
    let picture = document.getElementById("p")
    function nextPicture() {
        number == 7?number = 1 : number++;
        picture.src = `image/${number}.jpg`;
        /*if(number == 7){
            number = 1;
        }else{
            number++;
        }
        picture.src = `image/${number}.jpg`;*/
    }
    function returnPicture() {
        number == 1?number = 7 : number--;
        picture.src = `image/${number}.jpg`;
        /*if(number == 1){
            number = 7;
        }else{
            number--;
        }
        picture.src = `image/${number}.jpg`;*/
    }
    function randomPicture() {
        let r = Math.round(Math.random()*6 + 1);
        picture.src = `image/${r}.jpg`;
    }
</script>
